<template>
	<a-table :columns="columns" :data-source="props.datasource" bordered :loading="props.loading">
		<template #bodyCell="{ column, text, record }">
			<!--Guest Name & Contact Info-->
			<template v-if="'guestName' == column.key">
				<div>
					<a-input
						v-if="editableDatasource[record._id]"
						v-model:value="editableDatasource[record._id][column.key + '']"
						style="margin: -5px 0"
					/>
					<template v-else>
						<a-button type="link" @click="() => detail(record._id)">{{ text }}</a-button>
					</template>
				</div>
			</template>

			<template v-if="'contactInfo' == column.key">
				<div>
					<a-input
						v-if="editableDatasource[record._id]"
						v-model:value="editableDatasource[record._id][column.key + '']"
						style="margin: -5px 0"
					/>
					<template v-else>
						{{ text }}
					</template>
				</div>
			</template>

			<template v-if="'reservedSize' === column.key">
				<div>
					<a-input-number
						v-if="editableDatasource[record._id]"
						v-model:value="editableDatasource[record._id][column.key]"
						:min="1"
						:max="100"
						style="margin: -5px 0"
					/>
					<template v-else>
						{{ text }}
					</template>
				</div>
			</template>

			<template v-if="'arrivalTime' === column.key">
				<div>
					<a-date-picker
						v-if="editableDatasource[record._id]"
						:format="dateFormat"
						v-model:value="editableDatasource[record._id][column.key + '']"
					/>
					<template v-else>
						{{ formatDate(text) }}
					</template>
				</div>
			</template>

			<template v-if="'status' === column.key">
				<div>
					<status-select
						v-if="editableDatasource[record._id]"
						v-model:value="editableDatasource[record._id][column.key]"
						:disabledOptions="hasAuthorith(Role.Employee) ? ReservationStatus.Created : ''"
					></status-select>
					<span v-else>
						<a-tag :color="statusTagMap[record.status]">
							{{ record.status }}
						</a-tag>
					</span>
				</div>
			</template>

			<template v-else-if="column.key === 'operation'">
				<span v-if="editableDatasource[record._id]">
					<a-space>
						<a-typography-link @click="save(record._id)">Save</a-typography-link>
						<a-popconfirm title="Sure to cancel your information?" @confirm="cancel(record._id)">
							<a>Cancel</a>
						</a-popconfirm>
					</a-space>
				</span>
				<span v-else>
					<a-space>
						<a @click="edit(record._id)">Edit</a>
						<a-popconfirm
							title="Sure to cancel this reservation?"
							@confirm="deleteItem(record._id)"
							v-if="hasAuthorith(Role.Guest)"
						>
							<a>Cancel</a>
						</a-popconfirm>
					</a-space>
				</span>
			</template>
		</template>
	</a-table>
</template>
<script setup lang="ts">
import { dateFormat } from '@/types/meta';
import {
	Reservation,
	ReservationStatus,
	stringKey,
	UpdateReservationForm,
} from '@/types/reservation';
import { Role } from '@/types/role';
import { TableColumnType } from '@/types/table';
import useAutority from '@/utils/hooks/auth';
import * as dayjs from 'dayjs';
import { cloneDeep } from 'lodash-es';
import { UnwrapRef } from 'vue';
const columns: TableColumnType[] = [
	{
		title: 'Id',
		dataIndex: '_id',
		key: 'id',
		colSpan: 0,
		customCell: () => ({ colSpan: 0 }),
	},
	{
		title: 'Guest Name',
		dataIndex: 'guestName',
		key: 'guestName',
	},
	{
		title: 'Contact Info',
		dataIndex: 'contactInfo',
		key: 'contactInfo',
	},
	{
		title: 'Expected Arrival Time',
		dataIndex: 'arrivalTime',
		key: 'arrivalTime',
	},
	{
		title: 'Reserved Table Size',
		dataIndex: 'reservedSize',
		key: 'reservedSize',
	},
	{
		title: 'Status of Reservation',
		dataIndex: 'status',
		key: 'status',
	},
	{
		title: 'Operation',
		key: 'operation',
	},
];

const statusTagMap: stringKey = {
	Created: '#108ee9',
	Completed: '#87d068',
	Canceled: '#9ca3af',
};

interface Props {
	datasource?: Reservation[];
	loading: boolean;
}
interface Emits {
	(e: 'update', data: UpdateReservationForm, id: string): void;
	(e: 'remove', id: string): void;
	(e: 'detail', id: string): void;
}

const props = withDefaults(defineProps<Props>(), {
	datasource: () => [] as Reservation[],
});
const emits = defineEmits<Emits>();

const editableDatasource: UnwrapRef<Record<string, Reservation>> = reactive({});

const { hasAuthorith } = useAutority();

const formatDate = (date: Date | string) => dayjs(date).format(dateFormat);

const edit = (id: string) => {
	editableDatasource[id] = cloneDeep(props.datasource.filter((x) => id === x._id)[0]);
	editableDatasource[id]['arrivalTime'] = dayjs(editableDatasource[id]['arrivalTime']);
};
const cancel = (id: string) => {
	delete editableDatasource[id];
};
const save = (id: string) => {
	const editData = editableDatasource[id];
	Object.assign(props.datasource.filter((item) => id === item._id)[0], editData);
	delete editableDatasource[id];
	emits('update', editData as UpdateReservationForm, id);
};
const deleteItem = (id: string) => {
	emits('remove', id);
};

const detail = (id: string) => {
	emits('detail', id);
};
</script>
